﻿<style>

	@font-face{
		font-family: myFont;
		src: url("fonts/VNI-Dom.TTF");
	}
	
	.bg-container{
		position: absolute;
		background: url("images/main-bg.png") no-repeat;
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		-webkit-user-select:none;
		-moz-user-select:none;
	}
	
	.startup-message{
		position: absolute;
		width: 670px;
		height: 125px;
		left: 160px;
		top: 120px;
		font-family: myFont;
		font-size: 30px;
		font-weight: bold;
	}
	
	.play-button{
		position: absolute;
		width: 187px;
		height: 187px;
		left: 419px;
		top: 333px;
		border-radius: 12px;	
	}
	
	.play-button:hover{
		background: url("images/play-button.png") no-repeat;
		cursor: pointer;
	}
	
	.translate-button{
		position: absolute;
		width: 125px;
		height: 125px;
		left: 850px;
		top: 39px;
		border-radius: 70px;
	}
	
	.translate-button:hover{
		background: url("images/trans-button.png") no-repeat;
		cursor: pointer;
	}
	
	.next-trans-button{
		position: absolute;
		width: 49px;
		height: 55px;
		left: 842px;
		top: 355px;
	}
	
	.next-trans-button:hover{
		background: url("images/next_glow.png") no-repeat;
		cursor: pointer;
	}
	
	.prev-trans-button{
		position: absolute;
		width: 49px;
		height: 55px;
		left: 787px;
		top: 355px;
	}
	
	.prev-trans-button:hover{
		background: url("images/prev-glow.png") no-repeat;
		cursor: pointer;
	}
	
	.sound-effect{
		display: none;
		height: 0;
		width: 0;
	}
</style>

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

<script>
	$(document).ready(function(){
	
		// MESSAGE
		var VI = new Array();
		VI[0] = "Hoâm nay ngaøy 29 thaùng 8 naêm 2013";
		VI[1] = "Ngaøy hoâm sau";
		
		var EN = new Array();
		EN[0] = "Today, Sunday, June 30, 2013";
		EN[1] = "Tomorrow";

		// INIT
		var _MSG_INDEX = 0;
		var _CURRENT_LANG = "VI";
		
		function init(){
			$(".startup-message").text(eval(_CURRENT_LANG)[_MSG_INDEX]);
		}
		init();
		
		// CLICK PLAY BUTTON
		$(".play-button").click(function(){
			$(".sound-effect").empty().html('<audio hidden="true" autoplay="autoplay" src="sounds/play.mp3"></audio>');
			// REDIRECT
			// window.location = "http://google.com.vn";
			alert("Chuyển trang !!");
		});
		
		// CLICK TRANSLATION BUTTON
		$(".translate-button").click(function(){
			playSoundEffect();
			if (_CURRENT_LANG == "VI") _CURRENT_LANG = "EN";
			else _CURRENT_LANG = "VI";
			$(".startup-message").fadeOut(200, function(){
				$(this).empty().text(eval(_CURRENT_LANG)[_MSG_INDEX]).fadeIn();
			});
		});
		
		// CLICK NEXT BUTTON
		$(".next-trans-button").click(function(){
			_MSG_INDEX++;
			if (_MSG_INDEX >= eval(_CURRENT_LANG).length) _MSG_INDEX = eval(_CURRENT_LANG).length - 1;
			else {
				playSoundEffect();
				$(".startup-message").empty().text(eval(_CURRENT_LANG)[_MSG_INDEX]).hide().fadeIn();
			}
		});
		
		// CLICK PREV BUTTON
		$(".prev-trans-button").click(function(){
			_MSG_INDEX--;
			if (_MSG_INDEX < 0) _MSG_INDEX = 0;
			else {
				playSoundEffect();
				$(".startup-message").empty().text(eval(_CURRENT_LANG)[_MSG_INDEX]).hide().fadeIn();
			}
		});
		
		// MOUSE CLICKED EFFECT 
		$("div[type='button']").mousedown(function(){
			$(this).css("opacity" , "0.6");
		});
		
		$("div[type='button']").mouseup(function(){
			$(this).css("opacity" , "1");
		});
		
		// FIX CLICK OUTSIDE BUTTON
		$("div[type='button']").mouseleave(function(){
			$(this).css("opacity" , "1");
		});
		// END MOUSE CLICKED EFFECT
		
		// PLAY SOUND EFFECT
		function playSoundEffect(){
			$(".sound-effect").empty().html('<audio hidden="true" autoplay="autoplay" src="sounds/click.mp3"></audio>');
		}
	});
</script>

<div class="bg-container">
	<div class="sound-effect"></div>
	<div class="startup-message"></div>
	<div type="button" class="translate-button"></div>
	<div type="button" class="play-button"></div>
	<div type="button" class="next-trans-button"></div>
	<div type="button" class="prev-trans-button"></div>
</div>